const tbody = document.querySelector('.list')

// 获取学生信息
async function fn () {

  const { data } = await axios.get('/students')

  // console.log(data)

  // title
  document.querySelector('.total').innerHTML = data.data.length

  // 创建渲染
  tbody.innerHTML = data.data.map(item => {
    return `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender === 0 ? '女' : '男'}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province}${item.city}${item.area}</td>
          <td>
            <a  href="javascript:;" class="text-success mr-3"><i data-id=${item.id} class="bi bi-pen"></i></a>
            <a  href="javascript:;" class="text-danger"><i data-id=${item.id} class="bi bi-trash"></i></a>
          </td>
        </tr>
    `
  }).join('')

}
fn()

tbody.addEventListener('click', async function (e) {

  // 点击删除
  if (e.target.tagName === 'I' && e.target.classList.contains('bi-trash')) {

    // console.log(e.target.dataset.id)

    if (confirm('确定删除吗')) {

      await axios({
        method: 'delete',
        url: `/students/${e.target.dataset.id}`
      })

      message.success('删除成功') // 使用插件提示

      fn()
    }
  }

  // 点击修改
  if (e.target.tagName === 'I' && e.target.classList.contains('bi-pen')) {

    document.querySelector('#modal  h5.modal-title').innerHTML = '修改学员'

    // console.log(e.target.dataset.id)

    // 后续，如果需要让模态框显示，则：
    modal.show()

    // 做数据回显

    // 获取点击那个人的数据详情
    const { data: { data: res } } = await axios.get(`/students/${e.target.dataset.id}`)

    // console.log(res)

    // ❗❗❗
    // 因为在点击修改的确认按钮的时候发送请求需要 当前的 id  但是确认的标签没有自定义的id 需要自定义一个
    // 可以把 id存在 title上
    const id = e.target.dataset.id
    document.querySelector('#modal  h5.modal-title').setAttribute('data-id', id)

    // val(表单, 数据) // 数据回填。把数据回填到表单中【要求数据的键 ==== 表单各项的name属性值】
    val(document.querySelector('#form'), res)


    // 获取省
    const { data } = await axios.get('/api/province')

    // console.log(data)

    const arr = [`<option value=''>--省份--</option>`]

    arr.push(data.data.map(item => {
      return `<option value = ${item} >${item}</option>`
    }).join(''))

    province.innerHTML = arr


    // 获取市
    const { data: shi } = await axios.get('/api/city', { params: { pname: res.province } })

    // console.log(data)

    const arr1 = [`<option value=''>--城市--</option>`]

    arr1.push(shi.data.map(item => {
      return `<option value = ${item} >${item}</option>`
    }).join(''))

    city.innerHTML = arr1


    // 获取区
    const { data: qu } = await axios.get('/api/area', {
      params: {
        pname: res.province,
        cname: res.city
      }
    })

    // console.log(data)

    const arr2 = [`<option value=''>--地区--</option>`]

    arr2.push(qu.data.map(item => {
      return `<option value = ${item} >${item}</option>`
    }).join(''))

    area.innerHTML = arr2



    province.value = res.province

    city.value = res.city

    area.value = res.area





  }

})

// 点击添加
// 实例化模态框对象
const modal = new bootstrap.Modal('#modal')


// 后续，如果需要让模态框显示，则：
// modal.show()

// 如果需要让模态框隐藏，则：
// modal.hide()

// 省
const province = document.querySelector('.input [name=province]')
const city = document.querySelector('.input [name=city]')
const area = document.querySelector('.input [name=area]')
// console.log(province)
// console.log(city)
// console.log(area)

document.querySelector('.bi-plus').addEventListener('click', async function () {
  // console.log(1)


  // 重置表单
  document.querySelector('#form').reset()

  // 显示模态框
  modal.show()

  document.querySelector('#modal  h5.modal-title').innerHTML = '添加学员'


  // 省市联动

  // 获取省
  const { data } = await axios.get('/api/province')

  // console.log(data)

  const arr = [`<option value=''>--省份--</option>`]

  arr.push(data.data.map(item => {
    return `<option value = ${item} >${item}</option>`
  }).join(''))

  province.innerHTML = arr



})

// 获取市
province.addEventListener('change', async function () {

  // console.log(this.value)

  if (this.value === '') {
    city.innerHTML = `<option value=''>--城市--</option>`
    area.innerHTML = `<option value=''>--地区--</option>`
    return
  }

  const { data } = await axios.get('/api/city', { params: { pname: this.value } })

  // console.log(data)

  const arr = [`<option value=''>--城市--</option>`]

  arr.push(data.data.map(item => {
    return `<option value = ${item} >${item}</option>`
  }).join(''))

  city.innerHTML = arr

})


// 获取区
city.addEventListener('change', async function () {

  // console.log(this.value)

  if (this.value === '') {
    return area.innerHTML = `<option value=''>--地区--</option>`
  }

  const { data } = await axios.get('/api/area', {
    params: {
      pname: province.value,
      cname: this.value
    }
  })

  // console.log(data)

  const arr = [`<option value=''>--地区--</option>`]

  arr.push(data.data.map(item => {
    return `<option value = ${item} >${item}</option>`
  }).join(''))

  area.innerHTML = arr

})


// 点击添加确认按钮
document.querySelector('#submit').addEventListener('click', async function (e) {
  e.preventDefault()


  // 使用插件拿到 from 的 全部值

  let data = val(document.querySelector('.g-3'))

  // console.log(data)
  // 使用插件提示

  if (data.name.length >= 30) return message.error('长度小于30位')

  // 根据接口要求，数字类型的，必须用纯数字，不能使用 '20'
  data.age = +data.age // 如果使用 + 的方式转换，注意 +和变量 挨在一起
  data.gender = Number(data.gender)
  data.group = +data.group
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary

  // 用标题做判断看点击的是添加还是修改的
  const title = document.querySelector('#modal  h5.modal-title')

  // console.log(title.innerHTML)

  if (title.innerHTML === '添加学员') {
    // 发送Ajax请求
    const { data: res } = await axios.post('/students', data)

    // console.log(res)

    // 提示消息
    message.success(res.message) // 使用插件提示

  } else if (title.innerHTML === '修改学员') {

    const { data: res } = await axios.put(`/students/${title.dataset.id}`, data)

    console.log(res)

    // 提示消息
    message.success(res.message) // 使用插件提示

  }

  // 如果需要让模态框隐藏，则：
  modal.hide()

  // 重新渲染页面
  fn()

})